<template>
  <view class="bodyV">
    <view class="cu-bar bg-white search fixed no-bord"
          :style="[{top:CustomBar + 'px'}]">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input type="text" v-model="searchTxt" placeholder="输入搜索的关键词"
               confirm-type="search"/>
      </view>
      <view class="action">
        <button class="cu-btn text-custom-bg text-white"
                @tap.stop="searchMsgList">搜索</button>
      </view>
    </view>
    <scroll-view scroll-y class="indexes padding-sm">
      <view class="flex txt-ali">
        <view class="flex-sub" :class="item.idx==tabIndex?'txt-b-fouce':'txt-b'" @tap="tabSelect(item.idx)" v-for="(item,index) in tabs" >
          {{item.name}}
        </view>
      </view>

      <view v-if="tabIndex == 1">
        <view class="order-msg"  v-for="item in orderList" @tap="gotoInfo(item)">
          <view class="bg">
            <view class="txt-title">订单消息</view>
            <view class="flex">
              <img src="@/static/images/m1.png" class="m-img"/>
              <view class="m-content">
                <view class="m-name">{{item.orderName||''}}</view>
                <view class="m-des">{{item.orderStatusName}}</view>
                <view class="m-price">￥{{item.orderPay||''}}</view>
              </view>
            </view>
            <view class="txt-date">
              <view class="date">{{item.delayYmdTime}}</view>
              <view class="cuIcon-notice pr">
                <view class="cirle" v-if="item.watched != '1'"></view>
              </view>
            </view>
            <view class="m-desc text-cut">
             {{ item.msgContent }}
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="tabIndex == 0">

        <view class="xt-msg" v-for="item in verifyList" @tap="gotoInfo(item)">
          <view class="xt-title">核销通知</view>
          <view class="xt-des">{{item.msgContent}}</view>
          <view class="txt-date">
            <view class="date">{{item.delayYmdTime}}</view>
            <view class="cuIcon-notice pr">
              <!--              <view class="cirle" v-if="item.watched != '1'"></view>-->
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <view class="xt-msg" v-for="item in xtList" @tap="gotoInfo(item)">
          <view class="xt-title">系统消息</view>
          <view class="xt-des">{{item.msgContent}}</view>
          <view class="txt-date">
            <view class="date">{{item.delayYmdTime}}</view>
            <view class="cuIcon-notice pr">
<!--              <view class="cirle" v-if="item.watched != '1'"></view>-->
            </view>
          </view>
        </view>
      </view>
<!--      <view class="cu-list menu-avatar ">-->
<!--        <block v-for="(item,index) in msgList" :key="index">-->
<!--          <view class="cu-item" @tap.stop="redirectDetail(item)">-->
<!--            <view class="content" style="left: 1rem;">-->
<!--              <view class="text-grey">-->
<!--                <view class="text-cut">{{ item.msgTypeName }}</view>-->
<!--                &lt;!&ndash;            <view class="cu-tag round bg-orange sm">未读</view>&ndash;&gt;-->
<!--              </view>-->
<!--              <view class="text-gray text-sm flex">-->
<!--                <view class="text-cut">-->
<!--                  {{ item.msgContent }}-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
<!--            <view class="action">-->
<!--              <view class="text-grey text-xs">{{ item.delayYmdTime }}</view>-->
<!--              <view class="cuIcon-notice text-gray"></view>-->
<!--            </view>-->
<!--          </view>-->
<!--        </block>-->
<!--      </view>-->
      <view class="text-center padding text-gray">~~~~我是有底线的~~~~</view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {findMsgList} from "@/common/api/msg";

import {onMounted, computed, reactive, ref} from 'vue'
import {onLoad, onReady, onShow} from '@dcloudio/uni-app';
import {redirectLoginPage} from '@/common/utils/redirectPage'

import {useStore} from "@/common/store";

const store = useStore();

const token = computed(() => store.token)
const userId = computed(() => store.userId)
const CustomBar = ref(0)
const xtList = ref([])
const orderList = ref([])
const verifyList = ref([])
const searchTxt = ref('')
const tabIndex = ref(1)
const tabs = reactive([
  {name: '订单通知', idx: 1},
  {name: '核销通知', idx: 0},
  {name: '系统通知', idx: 2}

])
const tabSelect = (index) => {
  tabIndex.value = index;
}

const initMsgList = (value: string) => {
  findMsgList({
    msgUser: userId.value ||0,
    msgContent: value
  }).then(res => {
    orderList.value=[]
    xtList.value=[]
    verifyList.value=[]
    if(res.data) {
      res.data.forEach(item=>{
        if (item.msgType == 1) {
          let jstr = item.msgJson || '{}'
          let j =  JSON.parse(jstr)
          j['delayYmdTime'] = item.delayYmdTime
          j['watched'] = item.watched
          j['msgContent'] = item.msgContent
          j['id'] = item.id
          j['msgType'] = item.msgType
          orderList.value.push(j)
        } else if (item.msgType == 0) {
          xtList.value.push(item)
        } else if (item.msgType== 2) {
          verifyList.value.push(item);
        }
      })
    }
    console.log('orderList:',orderList.value,'xtList:',xtList.value)
  })
}

const searchMsgList = () => {
  initMsgList(searchTxt.value);
}

const redirectDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/message/messageInfo?id=${item.id}`
  })
}

const gotoInfo = (item)=>{
  debugger
  uni.setStorageSync('message', JSON.stringify(item));
  if (item.msgType == 1) {
    uni.navigateTo({
      url: `/pages/message/info?id=${item.id}`
    })
  } else if(item.msgType ==0){
    uni.navigateTo({
      url: `/pages/message/infoXt?id=${item.id}`
    })
  } else if (item.msgType == 2) {
    uni.navigateTo({
      url: `/pages/message/infoXt?id=${item.id}`
    })
  } else {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `功能正在开发中，敬请期待`
    });
  }

}

onShow(() => {
  if ((!userId.value) || userId.value == 0) {
    redirectLoginPage(false, '/pages/home/index');
  } else {
	  searchMsgList();
  }
})

onMounted(async () => {
  initMsgList('');
})
</script>

<style lang="scss"  scoped>
.indexes {
  height: 90vh;
  margin-top: 50px;
  background: white;
}
.bodyV {
  background-color: #f5f5f5;
  border-radius: 0px 10px;
  .no-bord{
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
  }
  .txt-b-fouce{
    font-size: 32rpx;
    color: #313131;
  }
 .txt-ali {
   align-items: baseline;
   padding-left: 20rpx;
 }
  .txt-b{
    font-size: 26rpx;
    color: #A5A5A5;
  }

  .order-msg{
    margin-top: 40rpx;
    border-radius: 10rpx;
    .bg{
      background: #F7FBFF;
      border-radius: 4rpx;
      position: relative;
      .txt-title{
        font-size: 28rpx;
        color: #313131;
        padding-top: 20rpx;
        padding-left: 20rpx;
      }
      .m-img{
        width: 150rpx;
        height: 150rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
      }
      .m-content {
        padding-left: 40rpx;
        padding-top: 40rpx;
        .m-name{
          font-size: 24rpx;
          color: #313131;
        }
        .m-des{
          font-size: 20rpx;
          color: #AEAEAE;
          margin-top: 20rpx;
        }
        .m-price{
          font-size: 24rpx;
          color: #577FDF;
          margin-top: 30rpx;
        }
      }
      .txt-date{
        position: absolute;
        top: 24rpx;
        right: 21rpx;
        .date{
          color: #878787;
          font-size: 22rpx;
          margin-bottom: 17rpx;
        }
        .pr{
          position: relative;
          text-align: center;
          .cirle{
            position: absolute;
            width: 10rpx;
            height: 10rpx;
            background: red;
            border-radius: 10rpx;
            top: 10rpx;
            left: 40rpx;
          }
        }
      }
      .m-desc{
        padding-left: 20rpx;
        padding-top: 40rpx;
        padding-bottom: 20rpx;
        color: #878787;
        font-size: 24rpx;
      }
    }
  }

  .xt-msg{
    margin-top: 40rpx;
    background: #F9F9F9;
    border-radius: 10rpx;
    position: relative;
    padding-left: 24rpx;
    .txt-date{
      position: absolute;
      top: 24rpx;
      right: 21rpx;
      .date{
        color: #878787;
        font-size: 22rpx;
        margin-bottom: 17rpx;
      }
      .pr{
        position: relative;
        text-align: center;
        .cirle{
          position: absolute;
          width: 10rpx;
          height: 10rpx;
          background: red;
          border-radius: 10rpx;
          top: 10rpx;
          left: 40rpx;
        }
      }
    }
    .xt-title{
      font-size: 30rpx;
      color: #202020;
      padding-bottom: 24rpx;
      padding-top: 30rpx;
    }
    .xt-des {
      font-size: 24rpx;
      color: #ABABAB;
      padding-bottom: 40rpx;
    }
  }

}

</style>
